<template>
  <div>
    <h1>我的收藏</h1>
    <!-- 收藏商品列表 -->
    <div class="collect-items">
      <div class="collect-item" v-for="(item, index) in collectItems" :key="index">
        <div class="item-product">
          <img :src="item.product.cover" alt="商品图片" class="collect-item-img">
          <div class="product-info">
            <div class="collect-item-title">{{ item.product.title }}</div>
            <div class="product-spec">{{ item.product.specs }}</div>
            <div class="product-price">¥{{ item.product.price / 100 }}元</div>
          </div>
        </div>
        <div class="item-actions">
          <button type="button" class="btn btn-addcart" @click.stop="addToCart(item.product.id)">
            <i class="icon-cart"></i> 加入购物车
          </button>
          <button type="button" class="btn btn-remove" @click.stop="deleteCollectItem(index)">
            <i class="icon-delete"></i> 取消收藏
          </button>
        </div>
      </div>
    </div>
    <!-- 分页组件 -->
    <Pagination :current-page="currentPage" :total-pages="totalPages" @page-changed="handlePageChange"/>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue';
import apis from "@/config/api-config.js";
import getResponse from "@/assets/js/http-client.js";
import Pagination from "@views/common/Pagination.vue";
import {ElMessage, ElMessageBox} from "element-plus";
import router from "@/router/index.js";

const emit = defineEmits(['goto:page']);

// 分页相关数据
const currentPage = ref(1);
const totalPages = ref(1);
const pageSize = ref(3);

// 收藏商品数据
const collectItems = ref([])

const handlePageChange = async (page) => {
  currentPage.value = page
  await getCollectList();
}
/**
 *
 * @returns {Promise<void>}
 */
const getCollectList = async () => {
  let url = apis.collect.getCollectList.url;
  let type = apis.collect.getCollectList.type;
  let params = {
    pageNum: currentPage.value,
    pageSize: pageSize.value
  };
  const result = await getResponse(url, type, params);
  if (200 !== result.code) {
    ElMessage.error(result.message);
    return;
  }
  collectItems.value = result.data.records;
  totalPages.value = result.data.pages;
}
const addToCart = async (prodId) => {
  let url = apis.cart.add.url;
  let type = apis.cart.add.type;
  let params = {prodId: prodId};
  const result = await getResponse(url, type, params);
  if (200 !== result.code) {
    ElMessage.error(result.message);
    return;
  }
  ElMessage.success({
    message: '加入购物车成功', duration: 1500, type: 'success', onClose: () => {
      emit('goto:page', '/member/shopping_cart');
    }
  });
}

onMounted(() => {
  getCollectList();
});
/**
 * 取消收藏
 * @param index
 * @returns {Promise<void>}
 */
const deleteCollectItem = async (index) => {
  let product = collectItems.value[index].product;
  // 确认取消收藏
  ElMessageBox.confirm(`确定取消收藏商品：${product.title}吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    // 取消收藏
    let url = apis.collect.delete.url;
    let type = apis.collect.delete.type;
    let params = {prodId: product.id};
    const result = await getResponse(url, type, params);
    if (200 !== result.code) {
      ElMessage.error(result.message);
      return;
    }
    ElMessage.success('取消收藏成功');
    currentPage.value = 1;
    // 重新获取收藏列表
    await getCollectList();
  }).catch(() => {
    // 取消取消收藏
    console.debug('放弃取消收藏');
  })
};
</script>

<style scoped>
h1 {
  text-align: left;
  color: #333;
  margin-bottom: 2rem;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.collect-items {
  display: grid;
  gap: 15px;
}

.collect-item {
  display: flex;
  align-items: center;
  padding: 15px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.collect-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.item-product {
  flex: 1;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.collect-item-img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 6px;
  margin-right: 20px;
}

.product-info {
  flex: 1;
}

.collect-item-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 5px;
}

.product-spec {
  font-size: 14px;
  color: #999;
  margin-bottom: 5px;
}

.product-price {
  font-size: 18px;
  color: #e53935;
  font-weight: bold;
}

.item-actions {
  display: flex;
  gap: 10px;
}

.btn-addcart {
  background: linear-gradient(135deg, #007BFF, #0062cc);
  color: white;
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-addcart:hover {
  background: linear-gradient(135deg, #0062cc, #0056b3);
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

.btn-remove {
  background: #fff;
  color: #666;
  padding: 8px 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-remove:hover {
  color: #e53935;
  border-color: #e53935;
}

</style>
